<template>
  <div class="custom-shoe-management">
    <!-- 页面标题 -->
    <el-page-header 
      @back="handleBack" 
      content="定制鞋管理"
      class="page-header"
    />
    
    <!-- 搜索和操作区 - 移除添加定制鞋款按钮和性别筛选 -->
    <el-card class="search-card">
      <div class="search-container">
        <el-input 
          v-model="searchQuery" 
          placeholder="搜索鞋款名称" 
          clearable
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #append>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </div>
    </el-card>
    
    <!-- 定制鞋款列表 -->
    <el-card class="table-card">
      <el-table 
        :data="customShoes" 
        border 
        stripe
        :loading="tableLoading"
        style="width: 100%"
      >
        <el-table-column 
          prop="spcifyShoes.spsname" 
          label="鞋款名称" 
          min-width="150"
        />
        <el-table-column 
          prop="spcifyShoes.spsprices" 
          label="价格" 
          width="100" 
          align="center"
          :formatter="formatPrice"
        />
        <el-table-column 
          prop="spcifyShoes.spsgender" 
          label="适用性别" 
          width="100" 
          align="center"
        />
        <el-table-column 
          prop="spcifyShoes.spscontent" 
          label="描述" 
          min-width="200"
        />
        <el-table-column 
          prop="spcifyShoes.types.tname" 
          label="类型" 
          width="120" 
          align="center"
        />
        <el-table-column 
          prop="spcifyShoes.brands.bname" 
          label="品牌" 
          width="120" 
          align="center"
        />
        <el-table-column 
          prop="spstate" 
          label="状态" 
          width="100" 
          align="center"
        >
          <template #default="scope">
            <el-tag :type= getSchemeStatusType(scope.row.spstate)>
              {{ getSchemeStatusText(scope.row.spstate)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column 
          label="操作" 
          width="260" 
          align="center"
        >
          <template #default="scope">
            <el-button 
              size="small" 
              type="primary" 
              @click="handleViewDetails(scope.row)"
            >
              查看详情
            </el-button>
            <el-button 
              size="small" 
              type="warning" 
              @click="handleEditShoe(scope.row)"
            >
              编辑
            </el-button>
            <el-button 
              size="small" 
              :type="1===1? 'danger' : 'success'" 
              @click="handleToggleStatus(scope.row.sprid)"
            >
             删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :page-size="params.pageSize"      
            :total="params.recordCount"      
            v-model:current-page="params.pageNum"  
            @current-change="handleCurrentChange"  
            @prev-click="prevPage"            
            @next-click="nextPage"            
            layout="total,prev,pager,next"    
            background                        
          />
        </div>
    </el-card>
    
    <!-- 定制鞋款详情弹窗（已移除编辑方案和新增方案按钮） -->
<el-dialog 
  v-model="showDetailsDialog" 
  title="定制鞋款详情" 
  :width="detailsDialogWidth"
>
  <div class="details-container">
    <!-- 1. 鞋款基础信息（保留优化后的字段展示） -->
    <div class="shoe-basic-info">
      <h3>{{ currentShoe.spcifyShoes?.spsname || '未命名鞋款' }}</h3>
      <div class="info-row">
        <span class="info-label">鞋款ID：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.spsid || '无' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">鞋编号：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.spsseq || '无' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">价格：</span>
        <span class="info-value">¥{{ (currentShoe.spcifyShoes?.spsprices || 0).toFixed(2) }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">适用性别：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.spsgender || '通用' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">类型：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.types?.tname || '未分类' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">品牌：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.brands?.bname || '无品牌' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">部件配置：</span>
        <span class="info-value">
          数量 {{ currentShoe.sprnum || 0 }} 件 | 明细：{{ currentShoe.spcifyShoes?.spspartinfo || '无' }}
        </span>
      </div>
      <div class="info-row">
        <span class="info-label">样式配置ID：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.spscss || '默认样式' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">关联订单ID：</span>
        <span class="info-value">{{ currentShoe.orderId || '未关联订单' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">方案状态：</span>
        <span class="info-value">
          <el-tag :type="getSchemeStatusType(currentShoe.spstate)">
            {{ getSchemeStatusText(currentShoe.spstate) }}
          </el-tag>
        </span>
      </div>
      <div class="info-row">
        <span class="info-label">鞋款描述：</span>
        <span class="info-value">{{ currentShoe.spcifyShoes?.spscontent || '无详细描述' }}</span>
      </div>
      <div class="info-row">
        <span class="info-label">备注信息：</span>
        <span class="info-value">{{ currentShoe.spremarks || '无' }}</span>
      </div>
    </div>

    <!-- 2. 定制方案列表（移除“编辑方案”按钮和“添加定制方案”按钮） -->
    <div class="custom-schemes">
      <h4>定制方案详情</h4>
      <!-- 空数据提示 -->
      <el-empty 
        v-if="!currentShoe || !currentShoe.sprid" 
        description="当前无定制方案数据"
        style="margin: 20px 0;"
      />
      <el-table 
        v-else
        :data="[currentShoe]" 
        border 
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column prop="sprid" label="方案ID" width="100" align="center" />
        <el-table-column prop="sprscheme" label="方案名称" min-width="150" />
        <el-table-column prop="sprsize" label="定制尺寸" width="100" align="center" />
        <el-table-column prop="sprnum" label="生产数量" width="100" align="center" />
        <el-table-column prop="spstate" label="方案状态" width="120" align="center">
          <template #default="scope">
            <el-tag :type="getSchemeStatusType(scope.row.spstate)">
              {{ getSchemeStatusText(scope.row.spstate) }}
            </el-tag>
          </template>
        </el-table-column>
        <!-- 完全移除“操作”列（含编辑方案按钮） -->
      </el-table>

      <!-- 移除“添加定制方案”按钮 -->
    </div>
  </div>
</el-dialog>
    
<!-- 编辑鞋款弹窗（新增） -->
<el-dialog 
  v-model="showEditShoeDialog" 
  title="编辑定制鞋款" 
  width="600px"
  :before-close="handleEditDialogClose"
>
  <el-form 
    :model="shoeForm" 
    :rules="shoeRules" 
    ref="shoeFormRef"
    label-width="120px"
    class="edit-shoe-form"
  >
    <!-- 鞋款名称（必填） -->
    <el-form-item label="鞋款名称" prop="spsname">
      <el-input 
        v-model="shoeForm.spsname" 
        placeholder="请输入鞋款名称" 
        maxLength="50"
      />
    </el-form-item>
    
    <!-- 鞋编号（必填） -->
    <el-form-item label="鞋编号" prop="spsseq">
      <el-input 
        v-model="shoeForm.spsseq" 
        placeholder="请输入鞋编号" 
        maxLength="20"
      />
    </el-form-item>
    
    <!-- 价格（必填，正数） -->
    <el-form-item label="价格(元)" prop="spsprices">
      <el-input 
        v-model.number="shoeForm.spsprices" 
        placeholder="请输入价格" 
        type="number"
        min="0.01"
        step="0.01"
      />
    </el-form-item>
    
    <!-- 适用性别（下拉选择） -->
    <el-form-item label="适用性别" prop="spsgender">
      <el-select v-model="shoeForm.spsgender" placeholder="请选择性别">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
        <el-option label="通用" value="通用" />
      </el-select>
    </el-form-item>
    
    <!-- 鞋款类型（下拉选择，需后端返回类型列表） -->
    <el-form-item label="鞋款类型" prop="typeId">
      <el-select v-model="shoeForm.typeId" placeholder="请选择类型">
        <el-option 
          v-for="type in shoeTypes" 
          :key="type.tid" 
          :label="type.tname" 
          :value="type.tid" 
        />
      </el-select>
    </el-form-item>
    
    <!-- 鞋款品牌（下拉选择，需后端返回品牌列表） -->
    <el-form-item label="鞋款品牌" prop="brandId">
      <el-select v-model="shoeForm.brandId" placeholder="请选择品牌">
        <el-option 
          v-for="brand in shoeBrands" 
          :key="brand.bid" 
          :label="brand.bname" 
          :value="brand.bid" 
        />
      </el-select>
    </el-form-item>
    
    <!-- 部件配置信息 -->
    <el-form-item label="部件配置" prop="spspartinfo">
      <el-input 
        v-model="shoeForm.spspartinfo" 
        placeholder="请输入部件配置（如：鞋面+鞋底+鞋带）" 
        maxLength="100"
      />
    </el-form-item>
    
    <!-- 部件数量 -->
    <el-form-item label="部件数量" prop="spspartnum">
      <el-input 
        v-model.number="shoeForm.spspartnum" 
        placeholder="请输入部件数量" 
        type="number"
        min="1"
      />
    </el-form-item>
    
    <!-- 样式配置ID -->
    <el-form-item label="样式配置ID" prop="spscss">
      <el-input 
        v-model="shoeForm.spscss" 
        placeholder="请输入样式配置ID（如默认填0）" 
        maxLength="20"
      />
    </el-form-item>
    
    <!-- 备注信息 -->
    <el-form-item label="备注" prop="spremarks">
      <el-input 
        v-model="shoeForm.spremarks" 
        placeholder="请输入备注（选填）" 
        type="textarea"
        rows="3"
        maxLength="200"
      />
    </el-form-item>
  </el-form>
  
  <!-- 弹窗底部按钮 -->
  <template #footer>
    <el-button @click="showEditShoeDialog = false">取消</el-button>
    <el-button type="primary" @click="handleSaveShoe">保存修改</el-button>
  </template>
</el-dialog>


  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { Search, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import {queryPage,updateById,deleteById,updateByShoeId,queryAll as queryAllTypes} from '@/api/CustomShoes'
import {queryAll as queryAllBrands} from '@/api/brand'


// 搜索
const searchQuery = ref('');


const customShoes=ref([])
 // 分页相关
const params = ref({
  pageNum: 1,
  pageSize: 5,
  recordCount: 0,
  pageCount: 0
});

const tableLoading = ref(false);
const showDetailsDialog = ref(false);
const showEditShoeDialog = ref(false); // 仅保留编辑弹窗状态
const showAddSchemeDialog = ref(false);
const isEditSchemeMode = ref(false);
// 当前鞋子
const currentShoe = ref({});
const detailsDialogWidth = ref('80%');

// 表单引用
const shoeFormRef = ref(null);
const schemeFormRef = ref(null);

// 鞋款表单数据 - 仅用于编辑
const shoeForm = reactive({
  spsid: null,
  spsseq: '',
  spsname: '',
  spsprices: 0,
  spscontent: '',
  spspartnum: 0,
  spspartinfo: '',
  spsgender: '',
  spscss: null,
  spremarks: '',
  typeId: null,
  brandId: null,
  isDelete: 0
});

// 定制方案表单数据
// const schemeForm = reactive({
//   sprid: '',
//   sprscheme: '',
//   sprsize: '',
//   sprnum: 0,
//   spremarks: '',
//   spstate: '0',
//   spcifyShoeId: '',
//   orderId: ''
// });


// 模拟数据 - 鞋款类型
const shoeTypes = ref([

]);

// 模拟数据 - 鞋款品牌
const shoeBrands = ref([

]);

// 模拟数据 - 定制鞋款
const allShoes = ref([

]);
function searchPage(){

  queryPage(searchQuery.value,params.value.pageNum,params.value.pageSize)
    .then(response => {
      console.log(response);
      customShoes.value = response.list;
      params.value = response.pager;
      tableLoading.value = false
    })
    .catch(error => {
      console.error('初始化查询失败:', error);
    });
}




// 鞋款表单验证规则（优化版：精准提示+合理限制）
const shoeRules = reactive({
  spsname: [
    { required: true, message: '请输入鞋款名称（如：夏季透气运动鞋）', trigger: ['blur', 'change'] },
    { max: 50, message: '名称长度不能超过50个字符（避免过长影响展示）', trigger: 'blur' },
  ],
  spsseq: [
    { required: true, message: '请输入鞋编号（如：SH202409001）', trigger: ['blur', 'change'] },
    { max: 20, message: '编号长度不能超过20个字符', trigger: 'blur' },

  ],
  spsprices: [
    { required: true, message: '请输入鞋款价格', trigger: ['blur', 'change'] },
    { type: 'number', message: '价格必须为数字（如：199.99）', trigger: 'blur' },
  ],
  spsgender: [
    { required: true, message: '请选择适用性别', trigger: ['blur', 'change'] }
  ],
  typeId: [
    { required: true, message: '请选择鞋款类型', trigger: ['blur', 'change'] },
    { validator: (rule, value, callback) => {
        // 避免选择“空值”（若后端返回的类型列表包含无效选项，可加此判断）
        if (value === '' || value === undefined || value === null) {
          callback(new Error('请选择有效的鞋款类型'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  brandId: [
    { required: true, message: '请选择鞋款品牌', trigger: ['blur', 'change'] },
    { validator: (rule, value, callback) => {
        if (value === '' || value === undefined || value === null) {
          callback(new Error('请选择有效的鞋款品牌'));
        } else {
          callback();
        }
      },
      trigger: 'change'
    }
  ],
  spspartinfo: [
    { max: 100, message: '部件配置描述不能超过100个字符（如：鞋面+鞋底+鞋带）', trigger: 'blur' },
  ],
  spremarks: [
    { max: 200, message: '备注不能超过200个字符（简洁描述特殊需求）', trigger: 'blur' },
    
  ]
});

// 2. 初始化鞋款类型/品牌列表（需对接后端接口，这里先模拟示例）
const initShoeTypesAndBrands = async () => {
  try {
    // 实际项目中替换为真实接口（如：getShoeTypes()、getShoeBrands()）
    // 示例：假设后端返回格式为 { id: 1, tname: '运动鞋' }
    queryAllTypes()
    .then(res=>{
      shoeTypes.value=res.list
    }).catch(err=>{

    })
   queryAllBrands()
   .then(res=>{
      shoeBrands.value=res.list
   }).catch(err=>{

   })


  } catch (error) {
    console.error('加载鞋款类型/品牌失败:', error);
    ElMessage.error('加载基础数据失败，请刷新重试');
  }
};

// 3. 页面挂载时初始化：加载列表 + 加载类型/品牌
onMounted(() => {
  searchPage(); // 原有的加载鞋款列表
  initShoeTypesAndBrands(); // 新增的加载类型/品牌
});

// 编辑鞋款：点击“编辑”按钮触发
const handleEditShoe = (row) => {
  // 重置表单状态（避免上次编辑残留）
  resetShoeForm();
  
  // 将当前鞋款数据赋值到表单（注意嵌套属性的正确取值）
  Object.assign(shoeForm, {
    // 基础字段（从 spcifyShoes 嵌套对象中取值）
    spsid: row.spcifyShoes?.spsid || '', // 鞋款ID（不可编辑，用于后端更新标识）
    spsname: row.spcifyShoes?.spsname || '',
    spsseq: row.spcifyShoes?.spsseq || '',
    spsprices: Number(row.spcifyShoes?.spsprices) || 0,
    spsgender: row.spcifyShoes?.spsgender || '通用',
    spspartinfo: row.spcifyShoes?.spspartinfo || '',
    spspartnum: Number(row.spcifyShoes?.spspartnum) || 1,
    spscss: row.spcifyShoes?.spscss || '0',
    spremarks: row.spremarks || '', // 备注在顶层对象
    
    // 关联ID（类型ID、品牌ID，需从嵌套对象中取值）
    typeId: row.spcifyShoes?.types?.id || '', // 类型ID（与下拉选项的value对应）
    brandId: row.spcifyShoes?.brands?.id || '', // 品牌ID（与下拉选项的value对应）
    
    // 删除状态（默认保留，不允许编辑）
    isDelete: row.isDelete || 0
  });
  
  // 打开编辑弹窗
  showEditShoeDialog.value = true;
};

// 编辑弹窗关闭前：先重置表单，再关闭弹窗
const handleEditDialogClose = () => {
  resetShoeForm(); // 重置表单内容（此时表单引用已正常保留）
  showEditShoeDialog.value = false; // 明确将弹窗状态设为 false，强制关闭
};
// 处理搜索
const handleSearch = () => {
  params.value.pageNum = 1; // 重置到第一页
  searchPage()
};

// 分页事件处理
const handleCurrentChange = (val) => {
  params.value.pageNum = val;
  searchPage();
};

const prevPage = () => {
  if (params.value.pageNum > 1) {
    params.value.pageNum--;
    searchPage();
  }
};

const nextPage = () => {
  if (params.value.pageNum < params.value.pageCount) {
    params.value.pageNum++;
    searchPage();
  }
};

// 返回上一页
const handleBack = () => {
  // 实际应用中这里应该是路由跳转
  ElMessage.info('返回上一页');
};

// 查看详情
const handleViewDetails = (row) => {
  currentShoe.value = { ...row };
  showDetailsDialog.value = true;
};

// 切换鞋款状态（启用/禁用）
const handleToggleStatus = (id) => {
  // 1. 弹出确认框，提示用户是否确认删除
  ElMessageBox.confirm(
    '此操作将永久删除该定制方案，删除后不可恢复！', // 确认提示内容
    '删除确认', // 弹窗标题
    {
      confirmButtonText: '确认删除', // 确认按钮文本
      cancelButtonText: '取消', // 取消按钮文本
      type: 'danger', // 弹窗类型（danger 显示红色警告图标）
      center: true, // 弹窗内容居中
      draggable: true // 允许拖拽弹窗（可选，提升体验）
    }
  )
  // 2. 用户点击“确认删除”后，执行删除接口
  .then(async () => {
    try {
      const res = await deleteById(id);
      // 3. 根据后端返回判断是否删除成功

        ElMessage.success('删除成功！');
        searchPage(); // 刷新列表，移除已删除数据
    } catch (err) {
      console.error('删除请求异常：', err);
      ElMessage.error('网络异常，删除失败，请重试');
    }
  })
  // 3. 用户点击“取消”或关闭弹窗，提示取消信息
  .catch(() => {
    ElMessage.info('已取消删除操作');
  });
};

// 保存鞋款（仅编辑功能）
const handleSaveShoe = async () => {
  console.log(shoeForm)
    updateByShoeId(shoeForm)
    .then(res=>{
      console.log(res)
       ElMessage.success('更新成功');
       searchPage()
       showEditShoeDialog.value = false;
    }).catch(err=>{
      console.log(err)
    })
};

// 重置鞋款表单（修复：不销毁表单引用，仅重置内容）
const resetShoeForm = () => {
  // 若表单已初始化，调用 Element Plus 内置方法重置（清除值和验证状态）
  if (shoeFormRef.value) {
    shoeFormRef.value.resetFields();
  }
  // 手动重置表单核心字段（避免残留数据）
  Object.assign(shoeForm, {
    spsid: null,
    spsseq: '',
    spsname: '',
    spsprices: 0,
    spsgender: '',
    typeId: null,
    brandId: null,
    spspartinfo: '',
    spspartnum: 0,
    spscss: null,
    spremarks: '',
    isDelete: 0
  });
};

// 获取方案状态文本
const getSchemeStatusText = (status) => {
  const statusMap = {
    '0': '待生产',
    '1': '生产中',
    '2': '已完成',
    '3': '已取消'
  };
  return statusMap[status] || '未知';
};

// 获取方案状态标签类型
const getSchemeStatusType = (status) => {
  const typeMap = {
    '0': 'info',
    '1': 'warning',
    '2': 'success',
    '3': 'danger'
  };
  return typeMap[status] || 'default';
};

// 格式化价格
const formatPrice = (row, column, value) => {
  return `¥${Number(value).toFixed(2)}`;
};
</script>

<style scoped>
.custom-shoe-management {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.search-input {
  width: 300px;
}

.table-card {
  background-color: #fff;
}

.pagination-container {
  margin-top: 15px;
  text-align: right;
}

.details-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shoe-basic-info {
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.shoe-basic-info h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.info-row {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.info-label {
  font-weight: bold;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  flex-grow: 1;
}

.custom-schemes h4 {
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    width: 100%;
  }
  
  .details-dialog-width {
    width: 95% !important;
  }
}
</style>
    




